<script lang="ts" setup>
import { onMounted, ref, watch } from 'vue';
import { RouterLink, useRoute } from 'vue-router';
// 引入 menuItem 类型声明

const route = useRoute();
const currentRouteName = ref(route.name as string);
const handleSelect = ( key : string) => {
  currentRouteName.value = key;
};

type Item = {
  index: string;
  path : string;
  title : string;
  icon : string;
  children ?: Item[];
};

const menuList = ref<Item[]>( [
  {
    index : 'Home',
    path : '/',
    title : '首页',
    icon : "House",
  },
  {
    index : 'Product',
    path : '/product',
    title : '产品',
    icon : "Menu",
    children : [
      {
        index : 'Product1',
        path : '/product/product1',
        title : '产品1',
        icon : "Menu",
      },
      {
        index : 'Product2',
        path : '/product/product2',
        title : '产品2',
        icon : "Menu",
      },
      {
        index : 'Product3',
        path : '/product/product3',
        title : '产品3',
        icon : "Menu",
      },
    ],
  },
  {
    index : 'Help',
    path : '/help',
    title : '帮助',
    icon : "Help",
  },
  {
    index : 'About',
    path : '/about',
    title : '关于',
    icon : "InfoFilled",
  },
] );
onMounted( () => {
  // console.log( 'onMounted header');
} );

watch(
    () => route.name,
    ( newRouteValue ) => {
      currentRouteName.value = newRouteValue as string;
      // console.log( 'watch header', newRouteValue );
    },
);
</script>

<template>
  <el-row>
    <el-col :span="21" >
      <el-menu mode="horizontal" :default-active="currentRouteName" @select="handleSelect" >
        <template v-for="item in menuList">
          <template v-if="item.children">
            <el-sub-menu :index="item.index" >
              <template #title >
                <RouterLink :to="item.path" >
                  <el-icon >
                    <component :is="item.icon" ></component >
                  </el-icon >
                  {{ item.title }}
                </RouterLink >
              </template >
              <template v-for="child in item.children as Item[]" v-if="item.children">
                <el-menu-item :index="child.index" >
                  <RouterLink :to="child.path" >
                    {{ child.title }}
                  </RouterLink >
                </el-menu-item>
              </template>
            </el-sub-menu >
          </template>
          <template v-else>
            <el-menu-item  :index="item.index">
              <RouterLink :to="item.path" >
                <el-icon >
                  <component :is="item.icon" ></component >
                </el-icon >
                {{ item.title }}
              </RouterLink >
            </el-menu-item>
          </template>
        </template>
      </el-menu >
    </el-col >

    <el-col :span="3" class="right-menu">
      <el-button type="primary" plain>登录</el-button>
      <el-button type="primary" plain>注册</el-button>
    </el-col>
  </el-row>
</template>

<style scoped>
  .right-menu {
    text-align: right;
    line-height: 59px;
    border-bottom: 1px solid var(--el-menu-border-color)
  }

  .el-menu-item a {
    padding: 0 var(--el-menu-base-level-padding);
  }
</style>